# Правила оформления JavaScript-кода

1. [Объекты](#1-Объекты)  
   1.1. [Создание объекта](#11-Создание-объекта)  
   1.2. [Зарезервированные слова](#12-Зарезервированные-слова)  
   1.3. [Ключевые слова](#13-Ключевые-слова)  
   1.4. [Создание обьекта на 3 и более элементов](#14-Создание-обьекта-на-3-и-более-элементов)  
2. [Переменные](#2-Переменные)
3. [Функции](#3-Функции)  
   3.1. [Именование функции](#31-Именование-функции)  
   3.2. [Передача функции в функцию](#32-Передача-функции-в-функцию)  
4. [Отступы](#4-Отступы)  
   4.1. [Горизонтальные отступы](#41-Горизонтальные-отступы)  
   4.2. [Вертикальные отступы](#42-Вертикальные-отступы)  
5. [Пробелы](#5-Пробелы)
6. [Скобки](#6-Скобки)
7. [Кавычки](#7-Кавычки)
8. [Точка с запятой](#8-Точка-с-запятой)
9. [Комментарии](#9-Комментарии)

## 1. Объекты

### 1.1 Создание объекта
Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор `new Object`.

**Хорошо**
```javascript
let item = {};
```

**Плохо**
```javascript
let item = new Object();
```

### 1.2 Зарезервированные слова
Не используйте зарезервированные слова в качестве ключей объектов. Они не будут работать в IE8.

[Подробнее](https://github.com/airbnb/javascript/issues/61)

**Хорошо**
```javascript
let superman = {
  defaults: { clark: 'kent' },
  hidden: true
};
```

**Плохо**
```javascript
let superman = {
  default: { clark: 'kent' },
  private: true
};
```

### 1.3 Ключевые слова
Не используйте ключевые слова (в том числе измененные). Вместо них используйте синонимы.

**Хорошо**
```javascript
let superman = {
  type: 'alien'
};
```

**Плохо**
```javascript
let superman = {
  class: 'alien'
};
```

### 1.4 Создание обьекта на 3 и более элементов.
При создании обьектов, равно как и массивов, содержащих большое количество свойств(элементов), и тем самым образующих строки, длиной более 20 символов, необходимо выполнять ряд условий:

* Открывающая скобка располагается на той же строке;
* Каждое свойство оформляется на новой строке;
* Пробел после двоеточия;
* Закрывающая скобка располагается на новой строке.

**Хорошо**
```javascript
let superman = {
  defaults: { clark: 'kent' },
  type: 'alien',
  hidden: true
};
```

**Плохо**
```javascript
let superman = {
  defaults:{clark:'kent'},
  type:'alien',
  hidden:true
};
```


**Плохо**
```javascript
let superman = {defaults: { clark: 'kent' }, type: 'alien', hidden: true};
```

## 2. Переменные
Для именования переменных используйте существительные на английском языке.
* Не используйте транслит (слова на русском языке латинскими буквами).
* Имя переменной должно быть осмысленным.
* Имя переменной не должно состоять из одной буквы (кроме итераторов циклов `i` и `j`).
* Для имён, состоящих из нескольких слов, используйте [camelCase](https://techrocks.ru/2018/08/09/most-common-programming-case-types/).

Имя может состоять из букв, цифр, символов $ и _, не должно начинаться с цифры.

**Хорошо**
```javascript
let vegetables;
let hasPositiveSaldoAccount;
```

**Плохо**
```javascript
let rrfgov;
let ovoschi;
let HasPositiveSaldoAccount;
let has_positive_saldo_account;
let a;
```

## 3. Функции

### 3.1 Именование функции
Имя функции должно быть глаголом (кроме функций констуркторов) на английском языке или начинаться с него.

* Не используйте транслит (слова на русском языке латинскими буквами).
* Имя функции должно быть осмысленным.
* Для имён, состоящих из нескольких слов, используйте [camelCase](https://techrocks.ru/2018/08/09/most-common-programming-case-types/). Исключением являются [функции конструкторы](https://learn.javascript.ru/constructor-new).

**Хорошо**
```javascript
function editName() {
  // тело функции
};

function Vehicle(name) {
  // тело функции
}
```

**Плохо**
```javascript
function pravkaspiska() {
  // тело функции
};

function GetVehicle(name) {
  // тело функции
}
```

### 3.2 Передача функции в функцию
При передаче функции, как аргумент в другую функцию, оформляйте код как в примере ниже.
```javascript
let arr = ['Яблоко', 'Апельсин', 'Груша'];
arr.forEach(function(item, i, arr){
  alert(i + ': ' + item + ' (массив:' + arr + ')');
});

arr.forEach((item, i, arr) => alert(i + ': ' + item + ' (массив:' + arr + ')'));
```

## 4. Отступы

### 4.1 Горизонтальные отступы
Отступ при вложенности - 2 пробела на каждый уровень вложенности.
* Не используйте символы табуляции.
* Отступы должны быть равномерными. Для каждого вложенного блока, отступ должен увеличиваться ровно на 2 пробела. Отступ должен быть таким, чтобы по одному отступу можно было понять, к какому блоку относится действие.
* В редакторе кода, символ табуляции можно заменить на 2 пробела.
* Включите отображение нивидимых символов.
* Для корректности отступов желательно использовать расширение indent-rainbow (расширение расскрашивает блоки отступов в разные цвета). При использовании расширения, отступов, выделеным красным цветом не должно быть.

**Хорошо**
```javascript
if (age < 98) {
  let a = 15;
  for (let i = 0, iMax = items.length; i < iMax; ++i) {
    // тело цикла
    if(i < 15) {
      // тело условной конструкции
      let b = 30;
      let c = a + b;
      console.log(c * 2);
    }
  }
}
```

**Плохо**
```javascript
if (age < 98) {
for (let i = 0, iMax = items.length; i < iMax; ++i) {
// тело цикла
let a = 15;
if(i < 15) {
// тело условной конструкции
let b = 30;
let c = a + b;
console.log(c * 2);
}
}
}
```

**Плохо**
```javascript
if (age < 98) {
 for (let i = 0, iMax = items.length; i < iMax; ++i) {
 // тело цикла
 let a = 15;
    if(i < 15) {
 // тело условной конструкции
 let b = 30;
let c = a + b;
   console.log(c * 2);
 }
}
}
```

**Плохо**
```javascript
// присутствуют символы табуляции
if (age < 98) {
	for (let i = 0, iMax = items.length; i < iMax; ++i) {
		console.log(i);
	}
}

// присутствуют как символы табуляции, так и символы пробелов
if (age < 98) {
	for (let i = 0, iMax = items.length; i < iMax; ++i) { // на этой строке, отступ сделан табуляцией
  	console.log(i); // на этой строке, отступ сделан сначала пробелами, а затем табуляцией
  } // на этой строке, отступ сделан пробелами
}
```

### 4.2 Вертикальные отступы
Между логическими блоками(циклами, функциями и т.д.) следует оставлять пустую строку. Это делает код более читабельным. Избегайте блоков кода более 9 строк подряд. Не добавляйте пустую строку после каждого действия.

**Хорошо**
```javascript
let i;
let iMax = items.length;
for (i = 0; i < iMax, ++i) {
  // тело цикла
}

function showName() {
  // тело функции
}
```

**Плохо**
```javascript
let i;
let iMax = items.length;

for (i = 0; i < iMax, ++i) {
  // тело цикла
}
function showName() {
  // тело функции
}
```

**Плохо**
```javascript
let a = 15;

let b = 30;

let c = a + b;

console.log(c * 2);
```

## 5. Пробелы
* Используйте пробелы между параметрами и не используйте между именем функции и скобкой;

**Хорошо**
```javascript
function edit(name, age) {
  // тело функции
}
```

**Плохо**
```javascript
function edit (name,age) {
  // тело функции
}
```

* При создании анонимной функции (функции без имени) необходимо использовать пробел перед скобкой;

**Хорошо**
```javascript
function (name, age) {
  // тело функции
}
```

**Плохо**
```javascript
function(name,age) {
  // тело функции
}
```

* Используйте пробелы вокруг операторов.

**Хорошо**
```javascript
if (age < 100) {
  // тело условной конструкции
}
```

**Плохо**
```javascript
if (age<100) {
  // тело условной конструкции
}
```

## 6. Скобки
* Открывающая фигурная скобка располагается на той же строке.
* Перед скобкой пробел.
* Закрывающая скобка располагается на новой строке.
* Всегда добавляйте фигурные скобки для циклов и условных конструкций, даже, когда блок состоит из одного действия.

**Хорошо**
```javascript
function edit(name, age) {
  if (age < 100) {
    // тело условной конструкции
  }
}
```

**Плохо**
```javascript
function edit(name, age)
{
  if (age < 100) {/*тело условной конструкции*/}
}
```

**Плохо**
```javascript
function edit(name, age)
{
  if (age < 100) /*тело условной конструкции*/
}
```

**Плохо**
```javascript
function edit(name, age)
{
  if (age < 100) 
    /*тело условной конструкции*/
}
```

## 7. Кавычки
Всегда в коде скрипта используйте одинарные кавычки, если не требуется иного. Двойные кавычки допустимы, если в этой же строке необходимо использовать апостроф (') или одинарные кавычки для других целей.

**Хорошо**
```javascript
let string = 'строка';
let phrase = "you're next";
```

**Плохо**
```javascript
let string = "строка";
```

## 8. Точка с запятой
В конце выражения обязательна точка с запятой.

**Хорошо**
```javascript
alert('Привет');
alert('Мир');
```

**Плохо**
```javascript
alert('Привет')
alert('Мир')
```

## 9. Комментарии
Для пояснения кода используются комментарии. Комментарии не исполняются интерпретатором JavaScript.

* Однострочные комментарии начинаются с двойного слэша `//`. За ним обязательно должен идти пробел;
* Многострочные комментарии располагаются между `/*` и `*/`. За символом начала комментария обязательно должен идти пробел. Символ конца комментария располагается на новой строке.
* Никогда не оставляйте закомментированный код. Комментарии должны использоваться для пояснения программы, а не скрытия иной реализации действий.

**Хорошо**
```javascript
/* Пример комментария.
Многострочного комментария.
*/

// Пример однострочного комментария.
```

**Плохо**
```javascript
/*Пример комментария.
Многострочного комментария.*/

//Пример однострочного комментария.
```